<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">

	<ui:composition template="/meringerTemplate.xhtml">

		<ui:define name="title">Choose Race</ui:define>
		
		<ui:define name="custom">
			<style media="screen" type="text/css">
				.wrapper {
					background-image: url("img/rosneath-circuit.jpg");
				}
				#content {
					background-color: transparent;
					background-image: none;
				}
			</style>	
		</ui:define>
		    
		<ui:define name="content">
			
			<h:form id="form">  
  				<p:messages id="msg" autoUpdate="true" closable="true"/>
				<p:poll id="poller" listener="#{raceBean.poll}" process="@this" update="races" interval="1"/>
				
			    <p:dataTable id="races" var="race" value="#{raceBean.races}" style="width: 960px; float:left;"
			                 rowKey="#{race.raceID}" paginator="true" rows="1">
			                 
				     <p:column headerText="Choose Race" id="raceColumn" style="width: 960px;">

				     	<div style="float: left; margin-left: 10px;">
				     		<h2>#{race.road.name}</h2>
				     		
				     		<h:outputText value="#{race.road.description}" escape="false" style="font-weight: bold;"/>
				     		<br/>
				     		<br/>
				     		Location: #{race.road.location}
				     		<br/>
				     		Number Of Laps: #{race.road.numberOfLaps}
				     		<br/>
				     		Circuit Length: #{race.road.circuitLength} miles
				     		<br/>
				     		Race Length: #{race.road.numberOfLaps * race.road.circuitLength} miles
				     		<br/>
				     		
					  		<h:panelGroup layout="block" rendered="#{race.road.bestRace != null}">
					     		Best Time: #{raceBean.formattedRaceTime(race.road.bestRace.sortedRaceResults[0].time)}
					     		<br/>
					     		Record Holder: #{race.road.bestRace.sortedRaceResults[0].user.username}
					     	</h:panelGroup> 
					     	<h:panelGroup layout="block" rendered="#{race.road.bestRace == null}">
					     		Best Race Time: Not set yet
					     		<br/>
					     		Record Holder: none
					     	</h:panelGroup>
					     	
					     	<h:panelGroup id="btnPnl" layout="block" style="margin-top: 50px;">
					     		<p:commandButton value="RACE" action="#{raceBean.enterRace(race.raceID)}" 
					     		                 rendered="#{(raceBean.enteredRaceID == null) or not (raceBean.enteredRaceID == race.raceID)}"
					     		                 disabled="#{not (raceBean.enteredRaceID == null) and not (raceBean.enteredRaceID == race.raceID)}"
					     		                 style="float: left;"/>
					     		<p:commandButton value="CANCEL" action="#{raceBean.cancelRace(race.raceID)}" 
					     		                 rendered="#{raceBean.enteredRaceID == race.raceID}"
					     		                 style="float: left;"/>
					     		
					     		<ui:param name="secs" value="#{raceBean.secondsToStart(race.raceID)}"/>
					     		<h:panelGroup id="timePnl" layout="block" rendered="#{secs gt -1}" 
					     					  style="float: left; margin-left: 65px; font-weight: bold; font-size:33px; color: #66FF66;">
						     		#{fn:substringBefore(secs div 60, '.')} :
						     		#{(secs mod 60) lt 10 ? '0' : ''}
						     		#{secs mod 60}
						     	</h:panelGroup>
					     	</h:panelGroup>
				     	</div>
				     	
				     	<div style="position: absolute; left: 550px; float: left;">
				     		<img src="#{race.road.imgPath}"/>
				     	</div>
				     	<h:panelGroup id="contestants" layout="block" style="float: right; margin-left: 5px;">
				     		<ui:repeat var="dummy" value="#{raceBean.dummyArray}" varStatus="ind">
				     			<h:panelGroup layout="block" style="text-align: center; border: 1px solid; border-color: #888626; width: 150px; height: 80px;" 
				     						  rendered="#{race.contestants[ind.index] != null}">
				     				<img src="#{race.contestants[ind.index].imgPath}" alt="Avatar" height="60" width="60" />
				     				<div>
				     					<b>
				     						#{race.contestants[ind.index].username}
				     					</b>
				     				</div>
				     			</h:panelGroup>
				     			<h:panelGroup layout="block" style="text-align: center; border: 1px solid; border-color: #888626; width: 150px; height: 80px;" 
				     						  rendered="#{race.contestants[ind.index] == null}">
				     			    <div style="color:green; margin-top: 32px;">
				     					<b>
				     						#{ind.index+1 gt race.road.maxNumPlayers ? 'N/A' : 'Empty' }
				     					</b>
				     				</div>
				     			</h:panelGroup>
				     		</ui:repeat>
				     	</h:panelGroup>
				     	
				     </p:column>
				     
				</p:dataTable>
			</h:form>  
			
		</ui:define>
	</ui:composition>

</html>
